import { create } from "zustand";
import { persist } from "zustand/middleware";

type Theme = "light" | "dark" | "system";

// 定义 UI 状态类型
interface UIState {
	sidebarOpen: boolean;
	sidebarCollapsed: boolean;
	theme: Theme;
	isDarkMode: boolean;

	// UI setters
	setSidebarOpen: (open: boolean) => void;
	toggleSidebar: () => void;
	setSidebarCollapsed: (collapsed: boolean) => void;
	toggleSidebarCollapsed: () => void;
	setTheme: (theme: Theme) => void;
	setIsDarkMode: (isDark: boolean) => void;
	toggleDarkMode: () => void;
}

// 创建 UI store
export const useUIStore = create<UIState>()(
	persist(
		(set) => ({
			sidebarOpen: false,
			sidebarCollapsed: false,
			theme: "system",
			isDarkMode: false,

			// UI setters
			setSidebarOpen: (open) => set({ sidebarOpen: open }),
			toggleSidebar: () =>
				set((state) => ({ sidebarOpen: !state.sidebarOpen })),
			setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
			toggleSidebarCollapsed: () =>
				set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
			setTheme: (theme) => set({ theme }),
			setIsDarkMode: (isDark) => set({ isDarkMode: isDark }),
			toggleDarkMode: () => set((state) => ({ isDarkMode: !state.isDarkMode })),
		}),
		{
			name: "ui-storage",
			partialize: (state) => ({
				sidebarCollapsed: state.sidebarCollapsed,
				theme: state.theme,
				isDarkMode: state.isDarkMode,
			}),
		},
	),
);
